<template>
	<view class="settlement">
		<statusBar />
		<view class="header" @tap="leftIndex">
			<view><image src="../../static/images/common/icon_black_back.png" mode=""></image></view>
			<view>订单结算</view>
		</view>
		<view class="search">
			<view>
				<view><image src="../../static/images/common/tishi.png" mode=""></image></view>
				<view>为减少解除，降低风险，请记得戴口罩</view>
			</view>
			<view class="navTo">
				<view class="store">
					<view class="title">
						<view class="address">王家湾摩尔城B座806...</view>
						<image src="/static/images/common/black_arrow_right.png" class="right-icon"></image>
					</view>
					<!-- 外卖&自取 -->
					<view class="buttons">
						<button type="default" class="button" :class="{ active: orderType == 0 }" @tap="orderType = 0" plain hover-class="none">自取</button>
						<button type="default" class="button" :class="{ active: orderType == 1 }" @tap="orderType = 1" plain hover-class="none">外卖</button>
					</view>
					<!-- 外卖&自取-->
				</view>
				<!-- 距离 -->
				<view class="map">
					<image src="../../static/images/common/weizhi.png" class="left-icon" mode=""></image>
					<view>距【楚河汉街(地铁站)】步行791米，请确认下单门店是否正确</view>
				</view>
				<!-- 联系电话 -->
				<view class="tel">
					<view>联系电话 15307193890</view>
					<view>自动填写</view>
				</view>

				<!-- 阅读 -->
				<view class="reading">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox active-color="#DBA871" v-model="checked" @change="checkboxChange">
							阅读并同意
							<text class="mendian">《门店自提服务协议》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>

		<!-- 打包带走 -->
		<view class="Packout">
			<view>
				<view :class="{ active: takeType == 0 }" @tap="takeType = 0">
					<view></view>
					<view>打包带走</view>
					<view></view>
				</view>
			</view>

			<view>
				<view :class="{ active: takeType == 1 }" @tap="takeType = 1">
					<view></view>
					<view>店内就餐</view>
					<view></view>
				</view>
			</view>
		</view>

		<!-- 自取时间 -->
		<view class="Takes_time">
			<view>
				<view>
					<view>自取时间</view>
					<view @tap="Takes_time">
						<view>14:03</view>
						<view><image src="../../static/images/common/black_arrow_right.png" mode=""></image></view>
					</view>
				</view>
				<!-- 2 -->
				<view>
					前面
					<text>58单/128杯</text>
					制作中，预计
					<text>14:03</text>
					自取
				</view>
				<view><u-line-progress active-color="#DBA871" :percent="70"></u-line-progress></view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goodsList">
			<view>商品列表</view>
			<view>
				<view class="page-section-spacing">
					<swiper
						class="swiper"
						:indicator-dots="indicatorDots"
						:autoplay="autoplay"
						:interval="interval"
						:duration="duration"
						previous-margin="12px"
						next-margin="40%"
						display-multiple-items="2"
					>
						<swiper-item><image style="width: 120upx;height: 120upx;" src="../../static/images/common/naicha.png" mode=""></image></swiper-item>
						<swiper-item><image style="width: 120upx;height: 120upx;" src="../../static/images/common/naicha.png" mode=""></image></swiper-item>
						<swiper-item><image style="width: 120upx;height: 120upx;" src="../../static/images/common/naicha.png" mode=""></image></swiper-item>
					</swiper>
				</view>
				<view>
					<view>共3件</view>
					<view><image src="../../static/images/common/black_arrow_right.png" mode=""></image></view>
				</view>
			</view>
		</view>

		<!-- 其他费用 -->
		<view class="fees">
			<view>其他费用</view>
			<view class="fees_one">
				<view>包装费</view>
				<view>￥3</view>
			</view>
			<!-- 新客户减 -->
			<view class="New">
				<view>
					<view>新客立减</view>
					<view>新</view>
				</view>
				<view>￥3</view>
			</view>

			<!-- 优惠券 -->
			<view class="coupons">
				<view>
					<view>优惠券</view>
					<view>劵</view>
				</view>
				<view>
					<view>暂无可用</view>
					<view><image src="../../static/images/common/black_arrow_right.png" mode=""></image></view>
				</view>
			</view>

			<!-- 优惠规则 -->
			<view class="rules">
				<view>
					<view>优惠规则</view>
					<view><image src="../../static/images/common/yiwen.png" mode=""></image></view>
				</view>
				<view>
					共3件商品，小计
					<text>￥74</text>
				</view>
			</view>
		</view>

		<!-- 备注 -->
		<view class="remkie">
			<view>备注</view>
			<view>
				<view>无接触配送，打包</view>
				<view><image src="../../static/images/common/black_arrow_right.png" mode=""></image></view>
			</view>
		</view>

		<!-- 合计 ￥74 -->
		<view class="Total">
			<view>
				合计
				<text>￥74</text>
			</view>
			<view>支付</view>
		</view>

		<!-- 时间弹出层 -->
		<u-popup v-model="show" mode="bottom" height="50%">
			<view class="u-wrap">
				<view class="choose">请选择取餐时间</view>
				<view class="u-menu-wrap">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
						<view
							v-for="(item, index) in tabbar"
							:key="index"
							class="u-tab-item"
							:class="[current == index ? 'u-tab-item-active' : '']"
							:data-current="index"
							@tap.stop="swichMenu(index)"
						>
							<text class="u-line-1">{{ item.name }}</text>
						</view>
					</scroll-view>
					<block v-for="(item, index) in tabbar" :key="index">
						<scroll-view scroll-y class="right-box" v-if="current == index">
							<view class="page-view">
								<view class="class-item">
									<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
										<view class="item-menu-name">{{ item1.name }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import statusBar from '../../components/statusBar/statusBar.vue';
import classifyData from '@/common/classify.data.js';
export default {
	data() {
		return {
			orderType: 0,
			checked: false,
			takeType: 0,
			indicatorDots: false,
			autoplay: false,
			interval: 2000,
			duration: 500,
			show: false,
			tabbar: classifyData,
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0 // 左边菜单item的高度
		};
	},
	components: {
		statusBar
	},
	computed: {},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		checkboxChange(e) {
			this.checked = true;
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			this.checked = true;
		},
		// 时间弹出层
		Takes_time() {
			this.show = true;
		},
		getImg() {
			return Math.floor(Math.random() * 35);
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if (index == this.current) return;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import './settlement.scss';
</style>
